<%--
  Created by IntelliJ IDEA.
  User: 20456
  Date: 2021/11/22
  Time: 15:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<% String contextPath = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>前台界面</title>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <script src="<%=contextPath%>/js/jquery-3.6.0.min.js"></script>
    <script src="<%=contextPath%>/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 【自定义 商品 列表】 -->
<div align="center">
    <p><strong style="padding-right: 1000px">厨师推荐【全部】</strong></p>
    <hr />
    <!-- 第1行 商品 -->
    <div style="display: table; border-spacing: 30px;">
        <div style="width: 1200px">
            <c:forEach items="${cookRecommendComplex}" var="cookrecomfoods">
                <!-- 商品1 -->
                <div class="food"
                        style="width: 200px; height: 300px; background-color: #DCDCDC; display: inline-block;
                        margin-left: 30px;float: left;margin-top: 20px;">
                    <input type="hidden" value="${cookrecomfoods.id}">
                    <!-- 图片 -->
                    <img style="width: 200px; height: 200px"
                         src="${cookrecomfoods.picture}">
                    <div
                            style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 菜品名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <label style="font-size: 20px">${cookrecomfoods.foodname}</label>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label style="color: #696969">${cookrecomfoods.price}元</label>
                        </div>

                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>


<script>
    $(function () {
        $(".food").click(function () {
            var id = $($(this).children("input").get(0)).val();
            window.open("http://localhost/front/foodcomplex?id="+id);
        });
    });
</script>
</body>
</html>
